<!DOCTYPE html>
<html>
<head>
	 <meta charset="UTF-8">
    <title></title>

    <style type="text/css">
    	*{
    		margin: 0;
    		padding: 0;
    	}
        li {
            list-style-type: none;
            display: inline-block;
            border: 1px solid #000;
        }
        .content{
            width: 200px;
            height: 200px;
            border: 1px solid #000;
        }
    </style>
</head>
<body>
<ul>
    <li>选项1</li>
    <li>选项2</li>
    <li>选项3</li>
</ul>
<div class="content">
    内容1
</div>
<div class="content" style="display:none">
    内容2
</div>
<div class="content" style="display:none">
    内容3
</div>

<script type="text/javascript">
        window.onload = function() {
             var oLi = document.getElementsByTagName('li');
             var aDiv = document.getElementsByTagName('div');
             for (var i = 0; i < oLi.length; i++) {
                 oLi[i].index = i;//注意，这里让index等于i是为了点击时切换到相应的div
                 oLi[i].onclick = function() {
                    for (var j = 0; j < oLi.length; j++) {
                        aDiv[j].style.display = "none";
                    };

                    aDiv[this.index].style.display = "block";
                 }
             };
        }
</script>

</body>
</html>